<template>
  <div>
    <div class="search-book-item-box" v-for="book in books" :key="book.index">
      <van-row>
        <van-col span="6">
          <div class="book-image-box">
            <img :src="book.titlePage" />
          </div>
        </van-col>
        <van-col span="18">
          <div class="book-info-box">
            <div class="name">{{ book.name }}</div>
            <div class="author-type">
              {{ book.author }} 著 - {{ book.type }} 爽文 争霸
            </div>
            <div class="summary">
              {{ book.summary }}
            </div>
            <div class="operation-btn">
              <van-button icon="wap-nav" size="mini">目录</van-button>
              <van-button icon="down" size="mini">下载</van-button>
              <van-button icon="like" size="mini" @click="addToBookshelf(book)"
                >收藏</van-button
              >
              <van-button
                icon="browsing-history"
                size="mini"
                @click="readBook(book)"
                >阅读</van-button
              >
            </div>
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import api from '@/fetch/api.js'
export default {
  data () {
    return {
      popupVisible: false,
      searchContent: ''
    }
  },
  props: {
    tittle: {
      type: String,
      default: '标题'
    },
    books: {
      type: Array,
      required: true
    }
  },
  methods: {
    getfocus () {
      this.$nextTick(() => {
        let cancel = this.$refs.popupSearch.$el.querySelectorAll('.van-field__control')[0]
        cancel.focus()
      }, 100)
    },
    showSearchPopup () {
      this.popupVisible = true
      this.getfocus()
    },
    searchBook () {
      this.$router.togo({
        name: 'searchResult',
        query: {
          content: this.searchContent
        }
      }, 'van-slide-right')
    },
    searchCancle () {
      this.popupVisible = false // 取消事件
      this.searchContent = ''
    },
    readBook (book) {
      // 获取用户阅读历史记录
      this.$router.togo({
        name: 'reader',
        query: {
          bookCode: book.code
        }
      })
    },
    addToBookshelf (book) {
      api.addToBookshelf({ anaBookCode: book.code }).then(resp => {
        console.log('add success')
      }).catch(err => {
        console.log('add to bookshelf error', err)
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/styles/index.less";
@import "~@/styles/variable.less";
.search-book-item-box {
  width: 100%;
  height: 130px;

  .van-row {
    height: 100%;

    .van-col {
      height: 100%;
    }
  }

  .book-image-box {
    height: 100%;
    img {
      height: 110px;
      margin: 5px;
    }
  }
  .book-info-box {
    height: 84px;
    margin: 5px 10px 0px 10px;
    text-align: left;

    .name {
      font-weight: bolder;
    }
    .author-type {
      font-size: 8px;
      margin-top: 7px;
      margin-left: 5px;
    }
    .summary {
      font-size: 12px;
      margin-top: 5px;
      margin-left: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2; // 控制多行的行数
      -webkit-box-orient: vertical;
    }
    .operation-btn {
      text-align: right;
      margin: 5px 5px 0px 5px;
    }
  }
}
</style>
